<template>
	<view class="page">
		<!-- search -->
		<view class="" style="display: flex;flex-direction: row;
			align-items: center;padding: 12px;background-color: #FFFFFF;justify-content: space-between;">
			<view class="" @click="popBack()">
				<text class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></text>
				<text style="font-size: 16px;">订单管理</text>
			</view>
			<view style="margin-left: 12px;
				display: flex;
				align-items: center;
				flex-direction: row;
				border-style: solid;
				border-width: 1px;
				border-color: #999999;
				padding:3px 12px;">
				<text style="font-size: 14px;color: #666666;">搜索</text>
			</view>
		</view>

		<!-- list -->
		<view style="flex: 1;display: flex;flex-direction: column;background-color: #FFFFFF;padding: 12px;">
			<view style="display: flex;flex-direction: column;">
				<form-title title="基本资料" />
				<form-key-value-row keystr="项目名称" valuestr="四川大学课程项目" />
				<form-key-value-row keystr="学生姓名" valuestr="张三" />
				<form-key-value-row keystr="学期" valuestr="2021秋" />
				<form-key-value-row keystr="订单号" valuestr="1045646484564564564" />
				<form-key-value-row keystr="订单类型" valuestr="手动录入" />
				<form-key-value-row keystr="订单备注" valuestr="" />
			</view>
			<view style="flex: 1;display: flex;flex-direction: column;">
				<!-- tabbar -->
				<scroll-view scroll-x="true" style="
				position: relative;
				display: flex;	
				white-space: nowrap;
			overflow: hidden;
			width: calc(100vw - 24px);
			background-color: #FFFFFF;">
					<view @click="tabClick(idx)"
						style="display: inline-block;color: #333333;padding: 12px 0;width: 33%;text-align: center;position: relative;"
						v-for="(obj,idx) in tabs" :key="idx">
						<text>{{obj}}</text>
						<view
							style="height: 2px;background-color: #007AFF;position: absolute;left: 0;right: 0;bottom: 0;"
							v-if="idx == tabindex">
						</view>
					</view>
					<!-- line -->
					<view
						style="position: absolute;left: 0;bottom: 0;right: 0;height: 1px;background-color: #ebebeb;" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ["详情", "课程信息", "退款"],
				tabindex: 0
			}
		},
		methods: {
			tabClick(idx) {
				this.tabindex = idx;
			}
		}
	}
</script>

<style>
	.page {
		flex: 1;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
	}
</style>
